{% extends 'base.html' %} {% block css%}
<style type="text/css">
.green{
  color: #00ff00;
}

.red{
  color: #ff0000;
  animation: blink 0.6s infinite;
}

.red0{
  color: #ff0000;
}

.gray{
  color: #eee;
}
 
@keyframes blink {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

 
/*@keyframes blink {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
    transform: scale(2);
  }
  51% {
    opacity: 0;
    transform: scale(0);
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}*/
</style>
{% endblock %} {% block body%}

<h3>
  Alarms/Faults
  <small style="color:#ccc"> {{ page_description }}</small>
  &nbsp;&nbsp;
  <span class="pull-right">
     
    <span style="font-size: 12pt;">
    <i class='fa fa-circle green'></i>
    &nbsp;deassert
    &nbsp;&nbsp;
    <i class='fa fa-circle red0'></i>
    &nbsp;assert
    </span>
    &nbsp;&nbsp;

    <a href="javascript:af_get_all()">Refresh
    <i class="glyphicon glyphicon-refresh"></i>
    </a>
    &nbsp;&nbsp;

    <a href="#" id="af_page_nav"
      >Navigation
      <i class="glyphicon glyphicon-arrow-right"></i>
    </a>
  </span>
</h3>

<!-- <div class="col-md-12"> -->
<div class="row">

{% for bytes in group_list %}
  <div class="col-md-4">
    <div class="panel panel-default">
      <div class="panel-heading">
        <a href="javascript:af_get_with_msg( '{{ bytes[1] }}', '{{ bytes[0] }}', '{{ bytes[2] }}' )">
       Bank {{ bytes[1] }} / {{ bytes[0] |title }} / Byte {{ bytes[2] }}
        </a>
      </div>

      <table class="table table-condensed table-hover table-bordered">
        {% for item in bytes[3] %}

        <tr class="{% if item[4] == 'Reserved'%} hide {% else %} {% endif%}">
        <td width="5%">
        {{ item[3] }}
        </td>
        <td width="8%">
          {% if item[4] == 'Reserved' %}
            <i style="color:#ccc" id="circle_{{ item[1] }}_{{ item[0]|replace(' ', '_') }}_{{ item[2] }}_{{ item[3] }}" class="fa fa-circle"></i>
          {% else %}
            <i id="circle_{{ item[1] }}_{{ item[0]|replace(' ', '_') }}_{{ item[2] }}_{{ item[3] }}" class="fa fa-circle"></i>
          {% endif %}

        </td>
        <td>
          {{ item[4] }}

          {% if item[5] == '' %}
          {% else %}
          <i style="color:#ccc" class="fa fa-info-circle pull-right" title="{{ item[4] }}"></i> 
          {% endif %}
        </td>
      </tr>


      {% endfor %}

      </table>  
    </div>
  </div>
  {% endfor %}

</div>
    

<div class="modal" tabindex="-1" role="dialog" id="myModal_page_nav">
    <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title">Navigation</h4>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>

      <div class="modal-body">
        <table class="table">
        
          {% for page_info in sheets_page_description_list %}
          <tr>
          <td width="25%">
            <a href="/af?page_name={{ page_info[0] }}">
              <b>
            {{ page_info[0] }}
              </b>
            </a>
          </td>
          <td>
            {{ page_info[1] }}
          </td>
          </tr>
          {% endfor %}
        </table>
      </div>
    </div>
  </div>
</div>

{% endblock %} {% block js%}
{{ super() }}
<script type="text/javascript">

  function af_get(bank, page, byte)
  {
    // alert("click" + page + ',' + byte);
    $.post(
        "api/af_get", {
            bank:bank,
            page:page,
            byte:byte
        },
        function(data, status) {
          d = JSON.parse(data);
          // console.log(d);

          for (i=0; i<d.length; i++)
          {
            page =  d[i][1].replace(' ', '_');

            $("#circle_" + d[i][0] + "_" + page + '_' + d[i][2] + '_'  + d[i][3]).attr("class", "fa fa-circle " + d[i][4]);
          }

        }
    );
  }

  function af_get_with_msg(bank, page, byte)
  {
    // alert("click" + page + ',' + byte);
    $.post(
        "api/af_get", {
            bank:bank,
            page:page,
            byte:byte
        },
        function(data, status) {
          d = JSON.parse(data);
          // console.log(d);

          for (i=0; i<d.length; i++)
          {
            page =  d[i][1].replace(' ', '_');

            $("#circle_" + d[i][0] + "_" + page + '_' + d[i][2] + '_'  + d[i][3]).attr("class", "fa fa-circle " + d[i][4]);
          }
          toastr["success"]("Data is up to date.");
        }
    );
  }

  function af_get_all()
  {
    var data= {{ group_list|tojson }}
    console.log(data);
    for(i=0; i<data.length; i++)
    {
      af_get(data[i][1], data[i][0], data[i][2]);
    }
     toastr["success"]("All data is up to date.");
  }


  $(document).ready(function(){
    toastr.options = {
        "closeButton": true,
        "timeOut": "1000",
        // "positionClass": "toast-top-center"
    }

    $("#af_page_nav").click(function() {
      $("#myModal_page_nav").modal();
    });

    af_get_all();

  });    

</script>
{% endblock %}
